<template>
  <div>
    <el-dialog
      :title="toChild"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :modal="false"
      width="30%"
      lock-scroll
      @close="closeDialog"
    >
      <div class="register_form_main">
        <el-row style="height: 100%">
          <el-col :span="24">
            <div class="grid-content-right">
              <el-form
                :model="userEditForm"
                :rules="userEditFormRules"
                ref="userEditRef"
                size="mini"
              >
                <el-form-item label="接口人名称" prop="name">
                  <el-input
                    v-model="userEditForm.name"
                    placeholder="接口人名称"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="userEditForm.gender" placeholder="请选择">
                    <el-option  v-for="(item,i) in $dictionaryList('性别')" :key="i" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="接口人办公地址" prop="address">
                  <el-cascader
                    size="large"
                    :options="options"
                    v-model="userEditForm.address"
                    clearable
                    filterable
                  ></el-cascader>
                </el-form-item> -->
                <el-form-item label="接口人办公地址" prop="address">
                  <el-input
                    type="tel"
                    v-model="userEditForm.address"
                    placeholder="请输入地址"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="cellPhone">
                  <el-input
                    type="tel"
                    v-model="userEditForm.cellPhone"
                    placeholder="手机号"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input
                    type="email"
                    v-model="userEditForm.email"
                    placeholder="请输入邮箱"
                    clearable
                  ></el-input>
                </el-form-item>
                <!-- <el-form-item label="负责项目">
                  <el-input type="email" placeholder="负责项目"
                    ><i class="el-icon-message" slot="prepend"></i
                  ></el-input>
                </el-form-item> -->
                <el-form-item label="客户" prop="customerId">
                  <el-select
                    v-model="userEditForm.customerId"
                    placeholder="请选择客户"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in tableCustomer"
                      :key="item.index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="介绍" prop="introduce">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="userEditForm.introduce"
                  >
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="onCertain"
          >保 存</el-button
        >
        <el-button
          type="info"
          class="cancel"
          @click="dialogClose"
          size="mini"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
//创建接口人/编辑接口人
import { establishInterface, editInterface } from "@/api/interface";
export default {
  props: {
    toChild: '',
    tableData: "",
    tableCustomer: "",
  },
  data() {
    return {
      dialogFormVisible: false,
      userEditForm: {
        address: "",
        cellPhone: "",
        customerId: "",
        email: "",
        gender: "",
        id: "",
        name: "",
        introduce: "",
      },
      userEditFormRules: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "首尾不能为空格",
            trigger: "blur",
          },
          {
            min: 3,
            max: 10,
            message: "用户名长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "首尾不能为空格",
            trigger: "blur",
          },
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: ["blur", "change"],
          },
        ],
        email: [
          {
            required: false,
            message: "请填写邮箱",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^[^\s]*$/,
            message: "不支持空格格式",
            trigger: "blur",
          },
          {
            pattern:
              /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
            message: "邮箱格式不正确",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请填写接口人名称",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^[^\s]*$/,
            message: "不支持空格格式",
            trigger: "blur",
          },
          // {
          //   pattern: /^([\u4E00-\u9FA5]).*$/,
          //   message: "请以中文名称开头",
          //   trigger: "blur",
          // },
        ],
        userNickName: [
          {
            required: true,
            message: "请填写昵称",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^[^\s]*$/,
            message: "不支持空格格式",
            trigger: "blur",
          },
        ],
        cellPhone: [
          {
            required: true,
            message: "请填写手机号码",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入接口人办公地址",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^[^\s]*$/,
            message: "不支持空格格式",
            trigger: "blur",
          },
        ],
        introduce: [
          {
            required: false,
            message: "请填介绍",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^[^\s]*$/,
            message: "不支持空格格式",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    openDialog(row) {
      this.dialogFormVisible = true; 
      if (row) {
        this.userEditForm = JSON.parse(JSON.stringify( row));
      }
    },
    closeDialog() {
      this.$refs["userEditRef"].resetFields();
      this.userEditForm={}
    },
    // 取消
    dialogClose() {
      this.dialogFormVisible = false;
    },
    /* 保存  */
    onCertain() {
      if (this.userEditForm.id) {
        // 修改
        this.$refs["userEditRef"].validate((valid) => {
          if (valid) {
            editInterface(
              this.userEditForm
            ).then((res) => {
              if (res && res.code && res.code === "00000") {
                this.$message.success("修改成功！");
                this.dialogClose();
                this.$parent.paginationOptions.pageNo = 1;
                this.$parent.queryUserList();
              }
            });
          } else {
            return false;
          }
        });
      } else {
        this.$refs["userEditRef"].validate((valid) => {
          if (valid) {
            establishInterface(this.userEditForm).then((res) => {
              console.log(res, "增加了........");
              if (res && res.code && res.code === "00000") {
                this.$message.success("创建成功！");
                this.dialogClose();
                this.$parent.paginationOptions.pageNo = 1;
                this.$parent.queryUserList();
              }
            });
          } else {
            return false;
          }
        });
      }
    },
  },
};
</script>


<style lang="less" scoped>
@deep: ~">>>";
@{deep} .register_form_main {
  position: relative;
  min-width: 30%;
  overflow: hidden;
  > span {
    display: block;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    padding: 20px 0;
    color: #409eff;
    background-color: #383f49;
    text-shadow: 0 1px -3px #409eff;
  }
  .grid-content-left {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    .avatar-uploader .el-upload {
      border: 1px dashed #8c939d;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-scrollbar__wrap {
      overflow-x: hidden !important;
    }
    .demo-image__lazy {
      height: 88px;
      .el-image {
        width: 80px;
        height: 80px;
        border: 1px solid #eee;
        margin: 2px;
      }
      .default_img_chioce {
        &::before {
          width: 80px;
          height: 80px;
          background-color: rgba(139, 197, 252, 0.5);
          position: absolute;
          display: block;
          top: 0;
          left: 0;
          content: "已选";
          color: #409eff;
          font-size: 12px;
        }
      }
    }
  }
}
.el-form {
  padding: 10px 50px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .el-input-group__append {
    padding: 0 2px;
  }
}
.passwordat {
  display: none;
}
.el-form-item {
  display: flex;
}
::v-deep .el-form-item__label {
  width: 125px;
  text-align: left;
}
::v-deep .el-input__inner {
  width: 250px;
}

::v-deep .el-dialog {
  width: 30%;
}
::v-deep .el-textarea__inner {
  min-height: 120px !important;
  width: 250px;
  font-size: 12px;
  font-family: "微软雅黑";
}
::v-deep .el-dialog__body {
  padding: 0px 20px;
}
::v-deep .el-dialog {
  min-width: 420px;
}
</style>